<template>
  <view class="wifi-container">
    <view class="wifi-header">
    </view>
    <view class="wifi-content">
      <view class="wifi-title">连接WIFI</view>

      <image class="wifi-img" src="/static/image/wifi.png" mode="widthFix" />
			
      <view class="wifi-card">
        <view class="wifi-select" @click="showList = true">
          <text :class="{'wifi-placeholder': !selectedWifi}">{{ selectedWifi || '请选择WIFI' }}</text>
          <text class="wifi-arrow"></text>
					<text class="wifi-arrow tn-icon-right"></text>

        </view>
        <view v-if="showList" class="wifi-list-popup">
          <view class="wifi-list-item" v-for="(item, idx) in wifiList" :key="idx" @click="selectWifi(item)">
            <text>{{ item }}</text>
            <text class="wifi-icon tn-icon-wifi"></text>
          </view>
        </view>
        
        <!-- 密码输入框，只有选择WiFi后才显示 -->
        <view v-if="selectedWifi" class="password-section">
          <input class="password-input" type="password" placeholder="输入密码" v-model="password" />
        </view>
      </view>
      
      <!-- 确认按钮，只有选择WiFi后才显示 -->
      <view v-if="selectedWifi" class="confirm-section">
        <view class="confirm-btn" @click="connectWifi">
          <text class="confirm-text">确认</text>
        </view>
      </view>
    </view>
		<tn-popup v-model="show" mode="bottom" borderRadius="50" closeBtn>
      <view class="pop-modal">
        <view class="pop-title">连接WIFI失败</view>
        <view class="pop-desc">
      
          <view class="pop-list">
            <view class="pop-li">请重新检查wifi密码</view>
          </view>
        
					<view style="height: 150rpx;"></view>
        </view>
      </view>
    </tn-popup>
  </view>
</template>

<script>
export default {
  data() {
		return {
			show:false,
      showList: false,
      selectedWifi: '',
      password: '',
      wifiList: [
        'ChinaNet–Rg2e',
        'ChinaNet–Rg2e',
        'ChinaNet–Rg2e',
        'ChinaNet–Rg2e',
        'ChinaNet–Rg2e',
      ]
    }
  },
  methods: {
    selectWifi(name) {
      this.selectedWifi = name
      this.showList = false
      this.password = '' // 重新选择WiFi时清空密码
    },
    connectWifi() {
      if (!this.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
			}
			if (this.password == '123') {
				this.show = true
				return
			}
			 uni.navigateTo({
				url: '/pages/device/wifi/res'
			 })
      // 连接WiFi逻辑
      console.log('连接WiFi:', this.selectedWifi, '密码:', this.password)
    }
  }
}
</script>

<style scoped>
.pop-modal {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx 30rpx 30rpx 30rpx;
  box-sizing: border-box;
  width: 100vw;
  max-width:700rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pop-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 24rpx;
  color: #111;
}
.pop-desc {
  font-size: 28rpx;
  color: #222;
  line-height: 1.7;
}
.pop-section {
  margin-bottom: 18rpx;
  font-size: 28rpx;
  color: #222;
}
.pop-section-title {
  font-size: 28rpx;
  color: #111;
  font-weight: bold;
  margin-top: 18rpx;
  margin-bottom: 8rpx;
}
.pop-list {
  margin-left: 12rpx;
  margin-bottom: 8rpx;
}
.pop-li {
  font-size: 26rpx;
  color: #444;
  margin-bottom: 6rpx;
}
.wifi-container {
  min-height: 100vh;
  background: #fff;
  padding: 0;
}
.wifi-header {
  background: linear-gradient(180deg, #4db6ff 0%, #3ca3f7 100%);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding: 60rpx 48rpx 48rpx 48rpx;
	height: 400rpx;
}
.wifi-title {
  color: #fff;
  font-size: 40rpx;
  font-weight: bold;
	position: absolute;
	top: -150rpx;
	z-index: 9999;
	left: 50rpx;
}
.wifi-img {
	position: absolute;
	top: -280rpx;
	z-index: 9999;
	right: 50rpx;
  width: 280rpx;
  height: 90rpx;
  margin-top: 0;
}
.wifi-content {
	border-radius: 40rpx 40rpx 0 0;
  background: #fff;
  padding: 0 24rpx;
  margin-top: -50rpx;
  position: relative;
  z-index: 2;
}
.wifi-card {
  padding: 70rpx 0 0 0;
  min-height: 120rpx;
  position: relative;
}
.wifi-select {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 36rpx;
  height: 100rpx;
  font-size: 30rpx;
  color: #222;
  border-radius: 40rpx;
	background-color: #fbfbfb;
}
.wifi-placeholder {
  color: #999;
}
.wifi-arrow {
  font-size: 32rpx;
  color: #bbb;
}
.wifi-list-popup {
  background: #fbfbfb;
  position: absolute;
  left: 0;
  top: 130rpx;
  width: 100%;
  z-index: 10;
  padding: 24rpx 0;
}
.wifi-list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 36rpx;
  font-size: 30rpx;
  color: #222;
  border-bottom: 1rpx solid #f2f2f2;
}
.wifi-list-item:last-child {
  border-bottom: none;
}
.wifi-icon {
  font-size: 32rpx;
  color: #333;
}

.password-section {
	margin-top: 50rpx;
	  height: 150rpx;
  font-size: 30rpx;
}

.password-input {
  width: 100%;
  height: 100rpx;
  background: #f8f8f8;
  border-radius: 35rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #333;
  border: none;
}

.password-input::placeholder {
  color: #999;
}

.confirm-section {
	margin-top: 40rpx;
  padding: 40rpx 24rpx;
}

.confirm-btn {
  width: 100%;
  height: 96rpx;
  background: #000;
  border-radius: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-text {
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
}
</style>
